<template>

  <div class="router_container">
    <RouterView />
  </div>

</template>

<script setup>
import { RouterView } from 'vue-router'

// 解决element-ui报错 ”ERROR ResizeObserver loop completed with undelivered notifications“
// 报错的原因：在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。
const debounce = (fn, delay) => {
  let timer = null
  return function () {
    const context = this
    const args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}
// 解决element-ui报错 ”ERROR ResizeObserver loop completed with undelivered notifications“
// 报错的原因：在页面绘制的时候，页面突然发生调整大小的事件，导致了样式和布局都需要重新评估，这个调整大小导致的布局变化，将延迟到下一帧来绘制。
const _ResizeObserver = window.ResizeObserver
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor (callback) {
    callback = debounce(callback, 16)
    super(callback)
  }
}

</script>

<style scoped>
.router_container{
  position:absolute;
  inset:0;
}
</style>
